<template>
  <div class="content-tuijian">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="article_scroller">
      <ul>
        <li v-for="(item,index) in lists" :key="index">
          <div class="img-box">
            <router-link :to="{ name: 'articlePage', params: { articleDetail: item.id }}">
              <img :src="item.url">
            </router-link>
          </div>
          <div class="msg-box">
            <h3>{{item.title}}</h3>
            <div class="author-msg">
              <div class="author-img">
                <img src="@/assets/img/rz-tx001.jpg">
              </div>
              <p class="author-name">{{item.writer}}</p>
              <p class="praise-num">{{item.noteCount}}赞 | {{item.reviewCount}}评论</p>
            </div>
            <p class="article-content" v-html="$options.filters.articleCut(item.abstract)"></p>
          </div>
        </li>
      </ul>
    </scroller>
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

export default {
  name: 'ArticleTuiJian',
  data() {
    return {
      lists: [],
      articleData: '',
      articleID: '',
      baseUrl: process.env.BASE_URL
    }
  },
  components: {},
  methods: {
    getData() {
      this.$axios
        .get('/api/?s=App.Main_Set.GetList&key=articles', {
          params: {
            app_key: this.$APPKEY.app_key
          }
        })
        .then(data => {
          // console.log(data)
          this.articleData = data.data.data.items[0].data
          // console.log(this.articleData)
          // 获取对象中ID最大值
          // console.log(
          //   Math.max.apply(
          //     Math,
          //     this.articleData.map(function(o) {
          //       return o.id
          //     })
          //   )
          // )
        })
        .catch(err => {
          self.fetchError = err
        })
    },
    refresh() {
      console.log('refresh')
      this.lists = []
      this.getData()
      let _this = this
      this.timeout = setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          _this.lists.push(_this.articleData[i])
        }
        this.$refs.article_scroller.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.getData()
      // this.$refs.article_scroller.resize();
      // console.log('还有更多数据')
      let _this = this
      this.timeout = setTimeout(() => {
        // console.log(111)
        let start = _this.lists.length
        let dataLength = _this.articleData.length
        for (let i = start; i < (start + 5 < dataLength ? start + 5 : dataLength); i++) {
          _this.lists.push(_this.articleData[i])
        }
        if (start >= dataLength) {
          _this.$refs.article_scroller.finishInfinite(true)
        } else {
          _this.$refs.article_scroller.finishInfinite(false)
        }
      }, 1500)
    }
  },
  filters: {
    articleCut(value) {
      if (!value) return ''
      value = value.toString()
      return value.length > 50 ? value.slice(0, 50) + '...' : value.slice(0, 50)
    }
  },
  mounted() {
    console.log('456465')
    this.getData()
    // console.log(this.$store.state);
    // console.log(this.$cookies.getCookie("app_rizhi_"));
    // console.log(document.cookie);
  }
}
</script>
<style scoped lang="scss">
.content-tuijian {
  width: 100%;
  height: calc(100vh - 45px);
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  // bottom: 45px;
  box-sizing: border-box;
  ul {
    width: 100%;
    overflow: hidden;
    padding: 0 12px 16px 12px;
    box-sizing: border-box;
    li {
      width: 100%;
      float: left;
      text-align: left;
      margin-top: 12px;
      margin-bottom: 12px;
      .img-box {
        width: 100%;
        border-radius: 6px;
        overflow: hidden;
        padding-bottom: 55.5%;
        background: url('~@/assets/img/load-bg.gif') center no-repeat;
        position: relative;
        img {
          width: 100%;
          position: absolute;
          height: 100%;
          top: 0;
          left: 0;
        }
      }
      .msg-box {
        width: 100%;
        h3 {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          line-height: 44px;
        }
        .author-msg {
          width: 100%;
          overflow: hidden;
          color: #999;
          .author-img {
            width: 20px;
            height: 20px;
            display: block;
            border-radius: 100%;
            border: 1px solid #f0f0f0;
            float: left;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p.author-name {
            display: block;
            font-size: 11px;
            float: left;
            margin: 6px 0 0 6px;
          }
          p.praise-num {
            display: block;
            float: right;
            font-size: 11px;
          }
        }
        p.article-content {
          font-size: 13px;
          color: #666;
          line-height: 18px;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
